<template>
  <div>
    <van-nav-bar title="我的订单" right-text=". . ." left-arrow @click-left="$router.go(-1)" />
    <van-search placeholder="商品名称/商品编号/订单号" show-action shape="round">
      <div slot="action"></div>
    </van-search>
    <van-tabs>
      <van-tab v-for="itemList in goods" :key="itemList.category" :title="itemList.category">
        <!-- 订单数量大于0，显示列表 -->
        <div v-if="itemList.items.length > 0">
          <van-card
            v-for="(item, index) in itemList.items"
            :key="index"
            :num="item.count"
            :price="item.price"
            :desc="item.desc"
            :title="item.title"
            :thumb="item.thumb"
          >
            <div slot="tags">
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </div>
            <div slot="footer">
              <van-button size="mini">去评价</van-button>
              <van-button size="mini">再次购买</van-button>
            </div>
          </van-card>
        </div>
        <!-- 订单数量为0，显示空空如也 -->
        <div v-else class="box-empty">
          <span class="box-img"></span>
          <h3>您暂时没有相关订单！</h3>
        </div>
      </van-tab>
    </van-tabs>
    <van-icon class="icon-filter" size="large" name="arrow-down" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 0,
      value2: "a",
      value3: "c",
      option1: [
        { text: "话费充值", value: 0 },
        { text: "流量卡充值", value: 1 },
        { text: "加油卡充值", value: 2 },
        { text: "游戏充值", value: "a" },
        { text: "我的电影票", value: "b" }
      ],
      option2: [
        { text: "我的火车票", value: "c" },

        { text: "我的机票", value: "d" },
        { text: "我的酒店", value: "e" },
        { text: "医药服务", value: "f" },
        { text: "本地生活服务", value: "g" }
      ],
      option3: [
        { text: "全新整车", value: "h" },
        { text: "彩票订单", value: "i" },
        { text: "度假", value: "j" },
        { text: "常购清单", value: "k" },
        { text: "回收站", value: "l" }
      ],
      goods: [
        {
          category: "全部",
          items: [
            {
              count: 1,
              price: 42.0,
              desc: "描述信息",
              title: "男士T恤 透气",
              thumb: "https://img.yzcdn.cn/vant/t-thirt.jpg"
            },
            {
              count: 1,
              price: 42.0,
              desc: "描述信息",
              title: "男士T恤 透气",
              thumb: "https://img.yzcdn.cn/vant/t-thirt.jpg"
            },
            {
              count: 1,
              price: 42.0,
              desc: "描述信息",
              title: "男士T恤 透气",
              thumb: "https://img.yzcdn.cn/vant/t-thirt.jpg"
            },
            {
              count: 1,
              price: 42.0,
              desc: "描述信息",
              title: "男士T恤 透气",
              thumb: "https://img.yzcdn.cn/vant/t-thirt.jpg"
            }
          ]
        },
        {
          category: "待付款",
          items: [
            {
              count: 1,
              price: 42.0,
              desc: "描述信息",
              title: "男士T恤 透气",
              thumb: "https://img.yzcdn.cn/vant/t-thirt.jpg"
            },
            {
              count: 1,
              price: 42.0,
              desc: "描述信息",
              title: "男士T恤 透气",
              thumb: "https://img.yzcdn.cn/vant/t-thirt.jpg"
            }
          ]
        },
        {
          category: "待收货",
          items: []
        },
        {
          category: "已完成",
          items: []
        }
      ]
    };
  }
};
</script>
<style lang="less">
.van-tabs__wrap {
  width: 80%;
}
.van-icon.icon-filter {
  position: fixed;
  top: 110px;
  right: 10px;
}

.box-empty {
  text-align: center;
}

.box-img {
  display: inline-block;
  margin-top: 120px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: orange;
}

.box-empty h3 {
  margin-top: 30px;
}
</style>
